<template>
<div>
  <el-table
  class="schTable"
    :data="reset"
    
    border
    @selection-change="handleSelectionChange"
    :header-cell-style="{background:'#f4f4f4'}"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="35">
    </el-table-column>
    <el-table-column
      type="index"
      :index="indexMethod"
      align="center"
      label="序号"
      width="49">
        
    </el-table-column>
    <el-table-column
      prop="ProductionPlanNo"
      align="center"
      :show-overflow-tooltip="true"
      label="排程号"
      width="155">
    </el-table-column>
    <el-table-column
      prop="LineName"
      align="center"
      :show-overflow-tooltip="true"
      label="线体"
      width="130">
    </el-table-column>
    <el-table-column
      prop="SnCount"
      align="center"
      label="排程SN数量" 
      width="97">
      <template scope="scope">
           <span @click="lookphoto(scope.row)" style="color: #0095FF;cursor:pointer">{{scope.row.SnCount}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="StartComposeTime"
      align="center"
      :show-overflow-tooltip="true"
      label="开始合成时间">
    </el-table-column>
    <el-table-column
      prop="EndComposeTime"
      align="center"
      :show-overflow-tooltip="true"
      label="合成完成时间">
    </el-table-column>
    <el-table-column
      prop="Status"
      align="center"
      label="状态"
      width="93">
      <template slot-scope="scope">
        <i class="yuandian" v-if="scope.row.Status=== 2" style="backgroundColor:#0095FF"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 3" style="backgroundColor:#0095FF"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 4" style="backgroundColor:#F1022F"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 5" style="backgroundColor:#F1022F"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 6" style="backgroundColor:#0095FF"></i>
        <i class="yuandian" v-else-if="scope.row.Status=== 7" style="backgroundColor:#F1022F"></i>
        <i class="yuandian" v-else style="backgroundColor:#0de49c"></i>
        <span v-if="scope.row.Status=== 2" style="color:#0095FF">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 3" style="color:#0095FF">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 4" style="color:#F1022F">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 5" style="color:#F1022F">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 6" style="color:#0095FF">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 7" style="color:#F1022F">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else style="color:#0de49c">
          {{scope.row.StatusFormat}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="SnJindu"
      align="center"
      label="合成进度"
      width="80">
      <template slot-scope="scope">
        <el-progress 
          type="circle" 
          :width="37" 
          :stroke-width="2"  
          :percentage="scope.row.SnJindu">
        </el-progress>
      </template>
    </el-table-column>
    <el-table-column
      prop="SnJindu"
      align="center"
      label="生产进度"
      width="148">
      <template slot-scope="scope">
        <el-progress 
          :text-inside="true" 
          :stroke-width="15" 
          :percentage="scope.row.SnJindu">
        </el-progress>
      </template>
    </el-table-column>
    <!-- <el-table-column
      prop="name"
      width="116"
      label="剩余时长（H）">
    </el-table-column> -->
    <el-table-column
      prop="NextProductionPlanNo"
      :show-overflow-tooltip="true"
      align="center"
      width="155"
      label="下一个排程">
    </el-table-column>
    <el-table-column
      prop="CreateTime"
      align="center"
      :show-overflow-tooltip="true"
      label="创建时间">
    </el-table-column>
  </el-table>

  <!-- 照片明细弹出框 -->
  <el-dialog title="照片明细表" center :visible.sync="photoDialogLogVisible" :close-on-click-modal='false' width="600px">
    <el-table
      :data="tableData"
      border
      height="485"
      :header-cell-style="{background:'#f4f4f4'}"
      style="width: 100%">
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="OrderFileCode"
        align="center"
        label="照片编码"
        width="150">
      </el-table-column>
      <el-table-column
        prop="FileName"
        align="center"
        label="照片名称"
        width="160">
      </el-table-column>
      <el-table-column
        prop="PixHeight"
        align="center"
        label="照片高度">
      </el-table-column>
      <el-table-column
        prop="PixWidth"
        align="center"
        label="照片宽度">
      </el-table-column>
      
    </el-table>
  </el-dialog>
  </div>
</template>

<script>
import {getOrderFilesByProductionPlanId} from '@/api/schedule'
  export default {
    props: {
      reset: {
        type: Array
      },
    },
    data() {
      return {
        tableData:[],
        photoDialogLogVisible:false,
        currentRow:{},
        // loading:true
      }
    },
    methods:{
      handleSelectionChange(val){
        this.$emit('changeData',val)
        let listId=[]
        val.forEach(el => {
            listId.push(el.ProductionPlanId)
        });
        this.$emit('getId',listId) 
      },
      lookphoto(row){
        console.log(row);
        this.handleCurrentChange(row) ;
      },
      handleCurrentChange(row){
        this.currentRow = row;
        
        getOrderFilesByProductionPlanId({productionPlanId:this.currentRow.ProductionPlanId}).then(res => {
          if(parseInt(res.Code) === 1){
            this.photoDialogLogVisible = true
            this.tableData = res.Result
          }
        })
      },
      indexMethod(index){
        return (index+1)+(this.$parent.currentPage-1)*this.$parent.size
      }
    }
  }
</script>
<style lang="scss">
.schTable {
  /deep/ td {
    padding: 0;
  }
  /deep/ table .cell{
    line-height:14px;
    margin-top: 2px;
  }
}
</style>
<style>
.yuandian{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  
}
</style>
